<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会员注册</title>
  <!-- 阿里巴巴矢量图库 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_561814_q1vg409ad6coko6r.css">
  <!-- jquery-3.2.1引用 -->
    <script src="__STATIC__/index/js/global/jquery-3.2.1.min.js"></script>
  <!-- 大于1200 -->
    <link rel="stylesheet" media="screen and (min-width: 1200px)" href="__STATIC__/index/css/register/register1200.css" />
  <!-- 1080-1200 -->
    <link rel="stylesheet" media="screen  and (min-width: 959px) and (max-width: 1199px) " href="__STATIC__/index/css/register/register1200.css"
    />
  <!-- 768-959 -->
    <link rel="stylesheet" media="screen  and (min-width: 768px) and (max-width: 959px) " href="__STATIC__/index/css/register/register768.css"/>
  <!-- 568-767 -->
    <link rel="stylesheet" media="screen  and (min-width: 568px) and (max-width: 767px) " href="__STATIC__/index/css/register/register568.css"
    />
  <!-- 375-567 -->
    <link rel="stylesheet" type="text/css" media="screen  and (min-width: 375px) and (max-width: 567px) " href="__STATIC__/index/css/register/register375.css"
    />
  <!-- 小于375-->
    <link rel="stylesheet" type="text/css" media="screen  and (max-width: 374px) " href="__STATIC__/index/css/register/register320.css"
    />
  <!-- jquery-3.2.1引用 -->
    <script src="__STATIC__/index/js/global/jquery-3.2.1.min.js"></script>
  <!--引入layer-->
    <script src="__STATIC__/layer/layer.js" ></script>
</head>

<body>
    <div class="PC">
        <div>
            <div>
                <a href="{:url('Index/index')}">首页</a>
                <a href="javascript:;">{$city.value}</a>
            </div>
            <div>
                <div>
                    <img src="__STATIC__/index/img/login/pc_logo.png" alt="">
                </div>
                <div class="pc-user">
                    <input type="text" placeholder="请输入注册昵称" name="realname" onkeyup="get_realname(this)">
                </div>
                <div class="pc-password">
                    <input type="text" placeholder="请输入手机号" name="mobile" onkeyup="get_mobile(this)">
                </div>
                <div class="pc-password">
                    <input type="password" placeholder="请输入新密码" name="password" onkeyup="get_password(this)">
                </div>
                <div class="pc-password">
                    <input type="password" placeholder="请确认新密码" name="repassword" onkeyup="get_repassword(this)">
                </div>
                <div class="pc-verification">
                    <input type="text" placeholder="填写验证码" name="msg_code" onkeyup="get_msg_code(this)">
                    <input class="btnSendCode" type="button" value="获取验证码" onClick="sendMessage()" />
                </div>
                <a href="javascript:;" class="pc-button" onclick="checkform();">注册</a>
                <a href="{:url('login/loginin')}" class="pc-register">已有账号？直接登录</a>
            </div>
        </div>
    </div>
    <div class="M">
        <div>
            <div>
                <a href="{:url('Index/index')}">
                    <span class="iconfont icon-xiangzuo"></span>返回</a>
                注册
            </div>
            <div>
                <div>
                    <img src="__STATIC__/index/img/login/m_logo.png" alt="">
                </div>
                <div class="m-user">
                    <input type="text" placeholder="请输入真实姓名" name="realname" onkeyup="get_realname(this)">
                </div>
                <div class="m-password">
                    <input type="text" placeholder="请输入手机号" name="mobile"  onkeyup="get_mobile(this)">
                </div>
                <div class="m-password">
                    <input type="password" placeholder="请输入密码" name="password" onkeyup="get_password(this)">
                </div>
                <div class="m-password">
                    <input type="password" placeholder="请输入确认密码" name="repassword" onkeyup="get_repassword(this)">
                </div>
                <div class="m-verification">
                    <input type="text" name="msg_code" placeholder="填写验证码" onkeyup="get_msg_code(this)">
                    <input class="btnSendCode" type="button" value="获取验证码" onClick="sendMessage()" />
                </div>

                <a href="javascript:;" class="m-button" onclick="checkform();">登录</a>
                <a href="{:url('login/loginin')}" class="m-register">已有账号？直接登录</a>
            </div>
        </div>
    </div>
    <script>
        var InterValObj; //timer变量，控制时间
        var count = 60; //间隔函数，1秒执行
        var curCount; //当前剩余秒数
        var code = ""; //验证码
        var codeLength = 6; //验证码长度
        function SetRemainTime() {
            if (curCount == 0) {
                window.clearInterval(InterValObj); //停止计时器
                $(".btnSendCode").removeAttr("disabled"); //启用按钮
                $(".btnSendCode").val("重新发送");
                $(".btnSendCode").css('color', '#1dc535');
                code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
            } else {
                curCount--;
                $(".btnSendCode").val(+curCount + "秒再次获取");
            }
        }
        /**
         * 发送短信验证码
         */
        function sendMessage() {
            var reg = /^1[34578]\d{9}$/;
            var mobile = $('input[name=mobile]').val();
            if (mobile == '') {
                layer.msg('请输入手机号',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }
            if (!reg.test($('input[name=mobile]').val())) {
                layer.msg('手机格式错误，请重新输入',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }

            curCount = count;
            var dealType; //验证方式
//            var uid = $("#uid").val(); //用户uid
            if ($("#phone").attr("checked") == true) {
                dealType = "phone";
            } else {
                dealType = "email";
            }
            //产生验证码
            for (var i = 0; i < codeLength; i++) {
                code += parseInt(Math.random() * 9).toString();
            }
            //设置button效果，开始计时

            $(".btnSendCode").css('color', '#999');
            $(".btnSendCode").attr("disabled", "true");
            $(".btnSendCode").val(+curCount + "秒再次获取");
            InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
            //向后台发送处理数据
             $.ajax({
                 type: "POST", //用POST方式传输
                 dataType: "text", //数据格式:JSON
                 url: "{:url('Login/get_msg_code')}", //目标地址
                 data: "dealType=" + dealType + "&mobile=" + mobile,
                 error: function (XMLHttpRequest, textStatus, errorThrown) {},
                 success: function (msg) {}
             });
        }

        /**
         *  检查提交表单信息是否正确
         */
        function checkform(){
            var mb = /^1[34578]\d{9}$/;
            var ps = /^[a-zA-Z0-9_]{6,16}$/;
            var realname = $('input[name=realname]').val();
            var mobile = $('input[name=mobile]').val();
            var msg_code = $('input[name=msg_code]').val();
            var password = $('input[name=password]').val();
            var repassword = $('input[name=repassword]').val();
            if(realname == ''){
                layer.msg('请输入真实姓名',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }

            if(mobile == ''){
                layer.msg('请输入手机号',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }
            if(!mb.test(mobile)){
                layer.msg('手机格式错误，请重新输入',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }
//        if(msg_code == ''){
//            alert('请输入短信验证码');
//            return false;
//        }
            if(password == ''){
                layer.msg('请输入新密码',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }
            if(!ps.test(password)){
                layer.msg('密码格式输入错误',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }
            if(password != repassword){
                layer.msg('两次密码输入不一致，请重新输入',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }

            $.post("{:url('Login/register')}",
                {realname:realname,mobile:mobile,msg_code:msg_code,password:password,repassword:repassword},
                function(data){
                    if(data.code == 1){
                        layer.msg('注册成功',{icon:1,time:1500,shade: 0.1}, function(index){
                            layer.close(index);
                            window.location.href = "{:url('Index/index')}";
                        });
                        return false;
                    }else{
                        layer.msg(data.msg,{icon:2,time:1500,shade: 0.1}, function(index){
                            layer.close(index);
                        });
                        return false;
                    }
                }
            );
        }
        /**
         * 获取真实姓名
         */
        function get_realname(obj){
            var vals = $(obj).val();
            $('input[name=realname]').val(vals);
        }
        /**
         * 获取手机号
         */
        function get_mobile(obj){
            var vals = $(obj).val();
            $('input[name=mobile]').val(vals);
        }
        /**
         * 获取密码
         */
        function get_password(obj){
            var vals = $(obj).val();
            $('input[name=password]').val(vals);
        }
        /**
         * 重新填写密码
         */
        function get_repassword(obj){
            var vals = $(obj).val();
            $('input[name=repassword]').val(vals);
        }
        /**
         * 获取短信密码
         */
        function get_msg_code(obj){
            var vals = $(obj).val();
            $('input[name=msg_code]').val(vals);
        }
    </script>
</body>

</html>